<template>
  <div id="player">
      <!-- <h2 class="title">黑云音乐</h2> -->
      <!-- 轮播图 -->
      <MySwiper></MySwiper>
      <div class="search">
        <input type="text" v-model.trim="search" @keyup.enter="searchMusic" />
        <button @click="searchMusic">
          <span class="iconfont icon-search" ></span>
        </button>
      </div>
      <div class="tab-wrapper">
        <!-- tab栏 -->
        <div class="tab-bar">
          <router-link to="/results" class="bar-item" active-class="active">搜索结果</router-link>
          <router-link to="/player" class="bar-item" active-class="active">歌曲播放</router-link>
          <router-link to="/video" class="bar-item" active-class="active">mv</router-link>
          <router-link to="/comment" class="bar-item" active-class="active">歌曲评论</router-link>
          <router-link to="/recommend" class="bar-item" active-class="active">推荐歌曲</router-link>
        </div>
        <!-- 对应的内容区域 -->
        <div class="tab-content">

        </div>
      </div>
    </div>
</template>

<script>
import MySwiper from './MySwiper.vue'
export default {
  components:{
    MySwiper
  },
  data() {
    return{
      search: "",
    }
    },
    methods: {
      searchMusic() {
        this.$router.push("/results/" + this.search)
        window.localStorage.setItem("search", this.search)
      },
    },
}
</script>

<style scoped>
    @import "@/assets/css/index.css";
    
</style>
